<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<% request.setAttribute("allowed", "Gestionar Sedes, Areas y Edificios");%>
<%@ include file='../Templates/security.jsp' %>

<h1 class="title">Gestión de Areas</h1>
<hr>
<p class="meta"></p>
<center>
    <h2>Consultar Area</h2>
    <form id="formularioArea" action="javascript:void(0);">
        <table>
            <tr>
                <td>Sede :</td>
                <td>
                    <select id="Sedes" name ="nombre_sede" class="filter"></select>
                </td>
            </tr>
        </table>
        <br>
        <html:button property="" styleId="novedadesAreas" value="  Atrás  "/>
        <html:button property="" value="  Mostrar Todo  " onclick="consultarAreas()"/>
        <html:button property="" value="Consultar" styleId="consultarForm" onclick="consultarAreas()" styleClass="oculta"/>
        <br><div style="clear: both;">&nbsp;</div><br>
    </form>
    <div id="consultarArea0">
        <table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable"  >
            <thead>
                <tr><th><h5>Area</h5></th>
                    <th><h5>Sede</h5></th>
                    <th><h5>Modificar</h5>
                </tr>
            </thead>
            <tbody id="resultado"></tbody>
        </table>
        <%@ include file="../Templates/paginasTabla.jsp" %>
    </div>
    <div style="clear: both;">&nbsp;</div>
</center>
<script type="text/javascript">
    $(function(){
        $("#consultarArea0").hide();
        listaSedes();
        consultarAreas();
    });
    
     $('.filter').change(function(){
        offset = 0;
        consultarAreas();
    });

    function consultarAreas(){
        limit = $('#limit').val();
        $.ajax({
            type: 'GET',
            url:"listaAreas.do?limit="+limit+"&offset="+offset+"&order="+order+"&asc="+asc,
            data: $('#formularioArea').serialize(),
            dataType: 'json',
            success: proceessConsultarAreas
        });
    }
    
    function proceessConsultarAreas(data) {
        $('#resultado').empty();
        $.each(data.consultarArea1 , function(i,item){
            if ((i % 2) == 0) fila = $("<tr bgcolor = \"#fff\">");
            else fila = $("<tr bgcolor = \"#ecf2f6\">");

            fila.append($("<td>").append(item.descripcion));
            fila.append($("<td>").append(item.nombre_sede));
            mod = "<img src='style/images/table_edit1.png' alt='Modificar Puesto Trabajo' "
                +"onclick=\"return modificarArea('"+item.id_area+"');\""
                +"width='20' height='20'>";
            fila.append($("<td>").append(mod));
            $('#resultado').append(fila);
            tam = item.tam
        });
        if(tam==0){
            $("#obs").html('<h4>No hay resultados que coincidan con los parametros dados.</h4>');
            $("#consultarArea0").hide();
        } else {
            $("#obs").html('OBSERVACIÓN: Para ordenar la tabla por un campo específico, presionar el nombre de la columna.');
            $("#currentpage").html((offset/limit)+1);
            $("#pagelimit").html(Math.ceil(tam/limit));
            $("#consultarArea0").show();
        }
    }
</script>